﻿@using YL.Core.Dto;

@section styles{
    <style>
        #db div {
            border: 1px solid #111111;
        }

            #db div span {
                color: red;
                font-size: 18px;
            }

        .titleP {
            color: darkslateblue;
            font-weight: 600;
            font-size: 20px;
            text-align: center;
        }
    </style>
}

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            报表管理
            <small>出入库统计</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">报表管理</a></li>
            <li class="active">出库统计</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group">
                            <span class="input-group-addon">日期范围</span>
                            <input type="text" v-model="dateMin" ref="datemin" id="datemin" class="form-control" style="width:120px;">
                            <span class="form-control" style="width:10px;border: none;"><i class="glyphicon glyphicon-arrow-right"></i></span>
                            <input type="text" v-model="dateMax" ref="datemax" id="datemax" class="form-control" style="width:120px;margin-left:10px;">
                            <button v-on:click="searchL" type="button" class="btn btn-success" style="margin-left:10px;"><i class="fa fa-search"></i> 查询</button>
                        </div>
                        <div class="container">
                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-8">
                                    <p class="titleP">出库信息</p>
                                    @*<div id="db" class="btn-group-vertical">
                                            @{
                                                var inSumInfo = ViewBag.inSumInfo as List<InventoryCollect>;
                                                foreach (var item in inSumInfo)
                                                {
                                                    <div><span>@item.MaterialName——@item.Weight (@item.Unit)——@item.Total </span><button class="btn btn-success" v-on:click="showL('@item.MaterialId','0')"> 详情 </button></div>
                                                }
                                            }
                                        </div>*@
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <td>物料名称</td>
                                                <td>总重量</td>
                                                <td>计价</td>
                                                <td>详情</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @{
                                                var outSumInfo = ViewBag.outSumInfo as List<InventoryCollect>;
                                                foreach (var item in outSumInfo)
                                                {
                                                    <tr>
                                                        <td>@item.MaterialName ( @item.Unit )</td>
                                                        <td>@item.Weight</td>
                                                        <td>@item.Total</td>
                                                        <td><button class="btn btn-success" v-on:click="showL('@item.MaterialId')"> 详情 </button></td>
                                                    </tr>

                                                }
                                            }
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts{
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                dateMin: '@ViewBag.datemin',
                dateMax: '@ViewBag.datemax',
                stockType: 1,
                materialId:''
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {

                    console.log(_self.$refs);


                    $('#datemin').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    $('#datemax').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });

                    //显示active
                    _self.$refs.ReportNewStockOut.parentNode.parentNode.classList.add("active");
                    _self.$refs.ReportNewStockOut.classList.add("active");

                });
            },
            methods: {
                getDateInfo: function () {
                    this.datemin = $("#datemin").val();
                    this.datemax = $("#datemax").val();
                },
                showL: function (mId, stype) {
                    this.getDateInfo();
                    var url = "/Report/Details?dateMin=" + this.datemin + "&dateMax=" + this.datemax + "&materialId=" + mId + "&stockType=" + this.stockType;
                    yui.layershow("详情", url, 800, 650);
                },
                searchL: function () {
                    this.getDateInfo();
                    var url="/Report/NewStockOut?dateMin=" + this.datemin + "&dateMax=" + this.datemax;
                    window.location.href = url;
                }
            }
        });
    </script>
}